(function(){
    if(typeof lz === 'undefined'){window.lz = {}}
    function lzpDom(selector){ return document.querySelector(selector)}
    lz.previewHtml = function(html,option,callback){
        let obj = {
            width: '92%',
            maxWidth: '800px',
            maxHeight: '80vh',
            opacity: '.8',
            type: 'html',
            close: 'top:calc(100% + 10px); left:calc(50% - 20px);'
        }
        if(option){
            for(let v in option){
                obj[v] = option[v];
            }
        }
        const domBody = lzpDom('body');
        const bodyOverflow = domBody.style.overflow;
        domBody.style.overflow = 'hidden';
        domBody.insertAdjacentHTML('afterbegin', `<div id="lzPreviewHtml" style="position: fixed; z-index: 10010; left:0; top:0; width:100%; height:100%; background: rgba(0,0,0,${obj.opacity}); backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); display:flex; align-items:center; justify-content: center; color: #fff;">
            <div class="lzPreviewHtml-container" style="position: relative; max-width:${obj.maxWidth}; width:${obj.width};">
                <div class="lzPreviewHtml-content" style="max-height: ${obj.maxHeight}; overflow:auto;">${html}</div>
                <svg class="lzPreviewHtml-close" style="position: absolute; ${obj.close} width: 40px; cursor:pointer;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3088" width="48" height="48"><path d="M512 128C300.8 128 128 300.8 128 512s172.8 384 384 384 384-172.8 384-384S723.2 128 512 128zM672 627.2c12.8 12.8 12.8 32 0 44.8s-32 12.8-44.8 0L512 556.8l-115.2 115.2c-12.8 12.8-32 12.8-44.8 0s-12.8-32 0-44.8L467.2 512 352 396.8C339.2 384 339.2 364.8 352 352s32-12.8 44.8 0L512 467.2l115.2-115.2c12.8-12.8 32-12.8 44.8 0s12.8 32 0 44.8L556.8 512 672 627.2z" p-id="3089" fill="#ffffff"></path></svg>
            </div>
        </div>`)
        if(callback) callback();
        lzpDom('.lzPreviewHtml-close').onclick = function(){
            obj.type === 'video' && lzpDom('.lzPreviewVideo video').pause();
            lzpDom('#lzPreviewHtml').remove();
            domBody.style.overflow = bodyOverflow;
        }
    }
    lz.previewVideo = function(url){
        const html = `<div class="lzPreviewVideo"><video src="${url}" style="width:100%; display:block;" controls x5-video-player-fullscreen="false" x-webkit-airplay="true" x5-playsinline="true" playsinline="true" webkit-playsinline="true" x5-video-player-type="h5" preload="auto" airplay="allow"></video></div>`;
        lz.previewHtml(html, {
            type: 'video'
        },function(){
            lzpDom('.lzPreviewVideo video').play();
        })
    }
    lz.previewIframe = function(url, option){
        let obj = {
            maxWidth: '1200px',
            maxHeight: '80vh',
            type: 'iframe',
        }
        if(option){
            for(v in option){
                obj[v] = option[v];
            }
        }
        const html = `<div class="lzPreviewIframe"><iframe src="${url}" style="border:0; background:#fff; width:100%; height: ${obj.maxHeight};"></iframe></div>`;
        lz.previewHtml(html, obj)
    }

    lz.previewImage = function(url, list){
        let arr = list ? list : [url];
        let index = arr.indexOf(url);
        const obj = {
            width: '100%',
            height: '100%'
        }
        const imgStyle = 'width:100%; height:100%; display:block;';
        const domBody = lzpDom('body');
        const bodyOverflow = domBody.style.overflow;
        domBody.style.overflow = 'hidden';
        const isMobile = /mobile/i.test(navigator.userAgent);
        let items = '';
        for(let i in arr){
            items += `<div id="lzPreviewImage${i}" style="${imgStyle} flex-shrink:0; scroll-snap-align: start; scroll-snap-stop: always; display:flex; align-items:center; justify-content: center;"><img src="${arr[i]}" style="max-width:100%; max-height:100%; display:block; margin:0 auto; object-fit: contain;"></div>`
        }
        let html = `
            <div id="lzPreviewImage" style="position:fixed; width:${obj.width}; height:${obj.height}; z-index:10010; left:0; top:0; background: rgba(0,0,0,.8); backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); overflow-x: scroll; display:flex; scroll-snap-type: x mandatory;">
                ${items}
            </div>
            <div id="lzPreviewImageBtns">
                <div id="lzPreviewImageNum" style="position:fixed; ${isMobile ? 'top: 15px;' : 'bottom: 15px;'} left:50%; z-index:10011; color:#fff; font-size:14px; background: rgba(0,0,0,.1); padding:3px 10px; border-radius:14px; transform: translateX(-50%);"></div>
                <svg id="lzPreviewImageClose" style="${isMobile ? 'display:none;': ''} position:fixed; top:5px; right:5px; z-index:10014; width:30px; height:30px; opacity:.8; cursor: pointer;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9664" width="200" height="200"><path d="M712.32 192L486.08 418.176 259.84 192 192 259.84l226.24 226.24L192 712.32l67.84 67.84 226.24-226.24 226.24 226.24 67.84-67.84-226.176-226.24L780.16 259.84z" fill="#ffffff" p-id="9665"></path></svg>
                <svg id="lzPreviewImagePrev" style="${isMobile ? 'display:none;': ''} position: fixed; top:50%; margin-top: -25px; left: 5px; z-index:10012; width:50px; height:50px; opacity:.8; cursor:pointer;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4199" width="200" height="200"><path d="M512.9 512.9l-1.8-1.8 1.8 1.8z m-2 0.2l2.2-2.2c-0.8 0.7-1.5 1.4-2.2 2.2z" fill="#ffffff" p-id="4200"></path><path d="M512 960C759.4 960 960 759.4 960 512s-200.6-448-448-448-448 200.6-448 448S264.6 960 512 960z m-117.8-469.6l2.2-2.2 21.5-21.5L583.6 301c12.4-12.4 32.8-12.4 45.3 0 12.4 12.4 12.4 32.8 0 45.3L463.1 512 628.8 677.8c12.4 12.4 12.4 32.8 0 45.3-12.4 12.4-32.8 12.4-45.2-0.1l-165.7-165.7-21.8-21.8-1.8-1.8c-5.3-5.7-8.5-13.4-8.4-21.8 0-8.29999999 3.1-15.8 8.3-21.5z" p-id="4201" fill="#ffffff"></path></svg>
                <svg id="lzPreviewImageNext" style="${isMobile ? 'display:none;': ''} position: fixed; top:50%; margin-top: -25px; right: 5px; z-index:10013; width:50px; height:50px; opacity:.8; cursor:pointer;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3989" width="200" height="200"><path d="M511.1 511.1l1.8 1.8-1.8-1.8z m2-0.2l-2.2 2.2c0.8-0.7 1.5-1.4 2.2-2.2z" fill="#ffffff" p-id="3990"></path><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64z m117.8 469.6l-2.2 2.2-21.5 21.5L440.4 723c-12.4 12.4-32.8 12.4-45.3 0-12.4-12.4-12.4-32.8 0-45.3L560.9 512 395.2 346.2c-12.4-12.4-12.4-32.8 0-45.3 12.4-12.4 32.8-12.4 45.2 0.1l165.7 165.7 21.8 21.8 1.8 1.8c5.3 5.7 8.5 13.4 8.4 21.8 0 8.3-3.1 15.8-8.3 21.5z" p-id="3991" fill="#ffffff"></path></svg>
            </div>
        `;
        domBody.insertAdjacentHTML('afterbegin',html);
        lzpDom(`#lzPreviewImage${index}`).scrollIntoView();
        const domScroll = lzpDom('#lzPreviewImage');
        const domNum = lzpDom('#lzPreviewImageNum');
        const domPrev = lzpDom('#lzPreviewImagePrev');
        const domNext = lzpDom('#lzPreviewImageNext');
        
        function scrolling(){
            index  = parseInt(domScroll.scrollLeft / domScroll.clientWidth);
            domNum.innerText = (index+1) + ' / ' + arr.length;
            index === 0 ? domPrev.style.opacity = 0 : domPrev.style.opacity = 0.8;
            index === arr.length - 1 ? domNext.style.opacity = 0 : domNext.style.opacity = 0.8;
        }
        scrolling();
        domScroll.addEventListener('scroll', scrolling)
        domScroll.onclick = function(){
            domBody.style.overflow = bodyOverflow;
            domScroll.removeEventListener('scroll', scrolling)
            domScroll.remove();
            lzpDom('#lzPreviewImageBtns').remove();
        }
        lzpDom('#lzPreviewImageClose').onclick = function(){
            domBody.style.overflow = bodyOverflow;
            domScroll.removeEventListener('scroll', scrolling)
            domScroll.remove();
            lzpDom('#lzPreviewImageBtns').remove();
        }
        domPrev.onclick = function(){
            if(index === 0) return;
            index--;
            domScroll.scrollLeft = index * domScroll.clientWidth;
            scrolling();
        }
        domNext.onclick = function(){
            if(index === arr.length - 1) return;
            index++;
            domScroll.scrollLeft = index * domScroll.clientWidth;
            scrolling();
        }
    }
})()